Somehow I don't like the approach of introducing a new silo for lots or functions where the purpose of the class is not specific enough. Let's think about it again.

I have already an idea:

• create a service like CustomFieldCard which inject a page object so that we can manage there some card specific functions like getCustomFieldCardContent(). And use the functions within page objects which want to use it with:

import { getCustomFieldCardContent } from '../../services/ShopwareUIHelpers.ts';

export class ProductDetail implements PageObject {
    // ...

    public getCustomFieldCardContent(selectField: Locator, listItem: string) {
        return getCustomFieldCardContent(this.page, locator, listItem);
    }
}

so within your test you could call then:

const customFieldLocators = await AdminProductDetail.getCustomFieldCardContent(selectField, listItem: string);

@vanpham-sw and @yusufttur what do you think about it?

@frobel I purposefully added the function to the UIHelpers class so that it would not have to be declared in every page object. With this test alone, we check 3-5 different detail pages and would thus have to add the function to each page object. I just found it easier to put it into the Helpers class once.

@GitEvil Even though this is a clever solution, I'd agree with Florian not to do it this way. This can lead to complexity if the functions are not cohesively related or if the class becomes a "catch-all" for unrelated functionalities. If the purpose is not specific, the class may become overly complex and difficult to maintain.

Have you tried below approach?

• Create a CustomFieldCard page object class contains getResultListItem & getCustomFieldCardContent
• detail pages: class ProductDetail extends CustomFieldCard implements PageObject